import { memo, useState } from "react";
import { SectionRoomWapper } from "./style";
import SectionTabs from "../tab";
import SectionFooter from "../section-footer";
import SectionRoom from "@/components/section-room";

const Section = memo((props) => {
  const { data, keyword = "list", width = "25%" } = props;

  const tabs = data.dest_address?.map((item) => item.name);
  let initName = keyword !== "list" ? Object.keys(data[keyword])[0] : "";

  const [name, setName] = useState(initName);

  const list = keyword !== "list" ? data[keyword][name] : data[keyword];

  const handleSelectTab = (name) => {
    setName(name);
  };

  return (
    <SectionRoomWapper>
      <div className="header">
        <h2 className="title">{data.title}</h2>
        {data.subtitle && <div className="subtitle">{data.subtitle}</div>}
      </div>
      <SectionTabs tabs={tabs} selectTab={handleSelectTab}></SectionTabs>
      <SectionRoom list={list} width={width}></SectionRoom>
      <SectionFooter name={data.name}></SectionFooter>
    </SectionRoomWapper>
  );
});

export default Section;
